<template>
<div>{{msg}}</div>
  <div>{{banner}}</div>
  <h3>{{"这是"+msg+"的"+banner}}</h3>
  <input type="text" v-model="msg">
  <br />
  <button @click="sub">-</button>
  <input type="text" v-model="num">
  <button @click="add">+</button>
  <button @click="banners++">修改banners</button>
  <p>{{banners}}</p>
  <p v-once>{{banners}}</p>
  <h5 v-text="cont"></h5>
  <h4 v-html="cont"></h4>
  <div v-pre>{{conts}}
  jfadsilkj
  adfhuk
  fdkn</div>
  <pre>
    asdfuhk
    ersadfgvc           sfdbgrsfv
    frdvc
    {{conts}}
    <div>{{banners}}</div>
  </pre>
  <a :href="srcs" :title="srctit" target="_blank"><img :src="src" :title="srctit" :width="srcsize" /></a>
  <div style="background: aqua">banner1</div>
  <div :style="'font-size:30px'">banner2</div>
  <div :style="[fontSizes,colors]">banner3</div>
  <div :style="{fontSize:fontSize2+'px','background-color':'red','margin-left':'20px',color:'blue'}">banner4</div>
  <div :style="styleObj">banner5</div>
  <div class="ab" :class="'ac'">banners1</div>
  <div :class="ab">banners2</div><!--无法显示，需要加单引号-->
  <div :class="{ab:true,ac:true}">banners3</div>
  <div :class="{ab,ac}">banner3，通过变量进行绑定，变量与绑定名相同</div>
  <div :class="{ab:'iab',ac:isac}">变量名与绑定名不同,引号可加可不加</div>
  <div :class="{iab,isac}">错误写法，无效果</div>
  <div :class="[ad]">用三目运算</div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      msg:"hello vue3",
      banner:"banner文案说明",
      banners:10,
      num:0,
      numa:0,
      numb:10,
      conts:"halfsdnkj",
      cont:`<a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a>`,
      srctit:"美丽的可可西里",
      srcsize:"100",
      src:"https://images.pexels.com/photos/6034803/pexels-photo-6034803.jpeg?cs=srgb&dl=pexels-pok-rie-6034803.jpg&fm=jpg",
      srcs:"https://www.pexels.com/zh-cn/photo/10549951/",
      srcstit:"点击跳转到详情页",
      fontSizes:'font-size:38px',
      fontSize2: 48,
      colors:"color:red;background-color:blue",
      styleObj:{
        fontSize: "12px",
        backgroundColor:"aqua",
        "margin-left":"10px",
      },
      ab:true,
      ac:true,
      iab:true,
      isac:true,
      ad:true,
      action:{
        ad:true,
      }
    }
  },
  methods:{
    add(){
      this.num == this.numb ? this.num=this.numb : this.num++;
      // if(this.num>=this.numb){
      //   this.num=this.numb;
      // }else{
      //   this.num ++;
      // }
    },
    sub(){
      this.num == this.numa ? this.num=this.numa : this.num--;
      // if(this.num<=this.numa){
      //   this.num = this.numa;
      // }else {
      //   this.num --;
      // }
    },
  },
};
</script>

<style scoped>
.ab{
  background: aqua;
}
.ac{
  color: chartreuse;
}
.ad{
  font-size: 28px;
  color: cadetblue;
  background-color: darkgreen;
}
</style>